<template>
    <div class="home">
   <LunBo></LunBo>
   <div class="nav">
       <van-grid>
  <van-grid-item icon="setting-o" text="服务流程" />
  <van-grid-item icon="location-o" text="服务范围" />
  <van-grid-item icon="phone-o" text="联系店长" />
  <van-grid-item icon="refund-o" text="赔付标准" />
 
</van-grid>
   </div>
   <div class="tip">
       <div class="pic">
           <img src="../../assets/img/a.png" alt="">
       </div>
       <div class="pic">
           <img src="../../assets/img/b.png" alt="">
       </div>
       <div class="pic">
           <img src="../../assets/img/c.png" alt="">
       </div>
       <div class="pic">
           <img src="../../assets/img/d.png" alt="">
       </div>
   </div>
   <List  v-bind:typdata ="typdata"></List>
    </div>
</template>
<script>
import {fapi}from'@/assets/js/farmapi.js'
import LunBo from  "@/components/LunBo.vue"
import List from './HomeList.vue'
export default {
     components:{
        LunBo,
        List
    },
    name:"home",
     data(){
         return{
             pro:[],
            typdata:[]
         }
     },mounted(){
        this.getData()
        
     },
     methods:{
         getData(){
              fapi("api/banner").then(res=>{
          console.log(res);
             this.pro=res.data.data
         });
          fapi('api/type').then(r=>{
             this.typdata = r.data.data
         })
         }
     }
}
</script>
<style lang="less" scoped>
@import url(../../assets/css/coom.css);
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
  
    /* line-height: 150px; */
    text-align: center;
    /* background-color: #39a9ed; */
   
  }
  img{
      width: 75%;
      height: 80%;
      border-radius: 20px;
      margin-left: 20px;
  }
  .lunbo{
      padding: 30px 20px;
     
  }
  .home{
      background-color: rgb(243, 244, 246);
  }
  .van-swipe-item{
 border-radius: 20px;
  }
.nav{
    padding: 30px 20px;
    border-radius: 10px;
   
}
.van-grid-item__content--center{
    background:rgb(243, 244, 246) ;
}
.tip{
    display: flex;
    flex-wrap: wrap;
    padding: 40px 15px;
    justify-content: space-between;
    background-color: #fff;
     margin: 20px 20px;
}
.pic{
    width: 48%;
    background-color: #fff;
    margin-top: 15px;
    border-radius:20px ;
    margin-left: 10px;
}

</style>
 